<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>关联抓拍</title>
        <link href="../img/icon.ico" rel="shortcut icon"/>
		<link rel="stylesheet" href="../layui/css/layui.css" />
        <link rel="stylesheet" href="../css/element.min.css?1" />
        <link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_5bb2ydgeqs.css">
        <link rel="stylesheet" href="../css/reset.css?3133">
        <link rel="stylesheet" href="../css/setlayui.css?12">
        <link rel="stylesheet" href="../css/viewer.min.css">
		<script src="../layui/layui.all.js"></script>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
        <script type="text/javascript" src="../js/element.min.js"></script>
        <script src="../js/viewer.min.js"></script>
	</head>
	<body>
        <div id="app" class="page-container" style="display: none;" v-show="showApp">
            <div class="contetn_box">
                <div class="top_box" ref="topbox">
                    <div class="cell_box">
                        <div style="width: 96px;text-align: right;" class="cell_name must_input">摄像头选择</div>
                        <div class="cell_cont">
                            <el-select class="public_input" v-model="deviceSerial" clearable placeholder="请选择">
                                <el-option
                                  v-for="item in sxtList"
                                  :key="item.deviceserial"
                                  :label="item.deviceserial"
                                  :value="item.deviceserial">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="cell_box">
                        <div class="cell_name">选择抓拍时间</div>
                        <div class="cell_cont">
                            <el-date-picker
                                v-model="timeData"
                                class="public_input_date"
                                type="datetimerange"
                                range-separator="至"
                                format="yyyy-MM-dd HH:mm"
                                value-format="yyyy-MM-dd HH:mm"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </div>
                    </div>
                    <div class="cell_but" style="padding-bottom: 2.69vh;">
                        <el-button @click="getImgData" class="border_but" type="primary">查询</el-button>
                    </div>
                </div>
                <div class="img_box" ref="imgbox">
                    <div class="img_title">现场抓拍</div>
                    <div class="img_list">
                        <div class="img_item" v-for="(item, index) in imgList" :key="index">
                            <div class="img_select" @click="chioce(item)">
                                <div v-if="!item.isselect" class="icon_select"></div>
                                <div v-if="item.isselect" class="el-icon-success"></div>
                            </div>
                            <div class="img_cont" @click="chioce(item)">
                                <img :src="item.url" alt="">
                            </div>
                            <div class="img_but">
                                <el-button @click="prevewImg(item.url)" type="text">预览</el-button>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
            <div class="but_box">
				<el-button @click="cancels" class="cancelClass">取消</el-button>
				<el-button @click="confirms" type="primary" style="margin-left: 120px">提交</el-button>
            </div>
            <ul id="jq22" style="opacity: 0;height: 0;overflow: hidden;">
                <li v-for="(item, index) in previewList" :key="index"><img :src="item" /></li>
            </ul>
        </div>
		<script src="../js/public.js?12345"></script>
		<script>
			var layer = layui.layer
			var vm = new Vue({
				el: '#app',
				data() {
					return {
                        showApp: false,
                        deviceSerial: '',
                        options: [],
                        timeData: [],
                        imgList: [],
                        projectId: '',
                        sxtList: [],
                        selectArr: [],
                        selected: [],
                        previewList: []
					};
				},
				methods: {
                    cancels () {
                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        parent.layer.close(index);
                    },
                    confirms () {
                        if (this.selected.length == 0) {
                            this.$message({
                                message: '请选择',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        var data = JSON.stringify(this.selected);
                        parent.$('#publicValue').val(data);
                        setTimeout(function() {
                            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                            parent.layer.close(index);
                        }, 100);
                    },
                    prevewImg (urls) {
                        this.previewList = [urls];
                        setTimeout(function () {
                            var viewer = new Viewer(document.getElementById('jq22'), {
                                hide: function () {
                                    viewer.destroy();
                                }
                            });
                            viewer.show();
                        }, 10);
                    },
                    chioce (item) {
                        if (item.isclick) {
                            return false
                        }
                        if (item.isselect) {
                            item.isselect = false
                            for (var i = 0; i < this.selected.length; i++) {
                                if (this.selected[i].id == item.id) {
                                    this.selected.splice(i, 1)
                                }
                            }
                        } else {
                            item.isselect = true
                            this.selected.push(item)
                        }
                    },
                    getImgData () {
                        var that = this
                        xLoading(true)
                        $.ajax({
                            type: 'post',
                            headers: {
                            },
                            url: baseUrl + '/Material/GetAssociatedPhoto',
                            data: {
                                deviceSerial: that.deviceSerial,
                                startTime: that.timeData.length > 0 ? that.timeData[0] : '',
                                endTime: that.timeData.length > 0 ? that.timeData[1] : ''
                            },
                            dataType: 'json',
                            success: function(res) {
                                xLoading(false)
                                if (!res.success) {
                                    that.$message({
                                        message: res.msg ? res.msg : '程序错误，请重试',
                                        type: 'error'
                                    });
                                    return false;
                                }
                                if (!res.data) {
                                    return false
                                }
                                var list = res.data.split('||')
                                for (var i = 0; i < list.length; i++) {
                                    list[i] = {
                                        id: list[i].split('|')[0],
                                        url: list[i].split('|')[1],
                                        isselect: false
                                    }
                                }
                                if (that.selectArr.length > 0) {
                                    for (var j = 0; j < that.selectArr.length; j++) {
                                        for (var i = 0; i < list.length; i++) {
                                            if (list[i].id == that.selectArr[j].id) {
                                                list[i].isselect = true
                                                list[i].isclick = true
                                            }
                                        }
                                    }
                                }
                                that.imgList = list
                            }
                        });
                    },
                    getSxtData () {
                        var that = this
                        xLoading(true)
                        $.ajax({
                            type: 'post',
                            headers: {
                            },
                            url: baseUrl + '/Material/GetCaptureDevices',
                            data: {
                                projectId: that.projectId
                            },
                            dataType: 'json',
                            success: function(res) {
                                xLoading(false)
                                if (!res.success) {
                                    that.$message({
                                        message: res.msg ? res.msg : '程序错误，请重试',
                                        type: 'error'
                                    });
                                    return false;
                                }
                                that.sxtList = res.data
                                if (res.data.length > 0) {
                                    that.deviceSerial = res.data[0].deviceserial
                                    that.getImgData()
                                }
                            }
                        });
                    }
				},
				mounted() {
                    var that = this
                    this.showApp = true;
                    setTimeout(function () {
						var aa = that.$refs.topbox.offsetHeight
						var ss = 'calc(100% - ' + aa + 'px)';
						that.$refs.imgbox.style.height = ss;
                    }, 2);
                    if (getQuerys('selectArr')) {
                        this.selectArr = JSON.parse(decodeURIComponent(getQuerys('selectArr')))
                    }
                    this.projectId = getQuerys('projectId')
                    this.timeData = [timeFormat(new Date(new Date().getTime() - 1 * 60 * 60 * 1000), 1), timeFormat(new Date(), 1)]
                    this.getSxtData()
				}
			});
		</script>
	</body>
	<style>
        .contetn_box {
            height: calc(100% - 70px);
            padding: 4.04vh 3.75vw;
        }
        .top_box {
            display: flex;
            flex-wrap: wrap;
        }
		.cell_box {
            display: flex;
            align-items: center;
            margin-right: 20px;
            padding-bottom: 2.69vh;
        }
        .cell_name {
            padding-right: 10px;
            white-space: nowrap;
        }
        .img_box {
            display: flex;
        }
        .img_title {
            width: 96px;
            min-width: 96px;
            padding-right: 10px;
            text-align: right;
        }
        .img_list {
            flex: 1;
            border: 1px solid #EBEBEB;
            display: flex;
            flex-wrap: wrap;
        }
        .img_item {
            width: 140px;
            position: relative;
            margin-top: 20px;
            margin-left: 30px;
        }
        .img_cont {
            width: 140px;
            height: 140px;
            border-radius: 5px;
            cursor: pointer;
            overflow: hidden;
            border: 2px solid #999999;
        }
        .img_but {
            display: flex;
            justify-content: center;
            padding-top: 10px;
        }
        .el-button--text{
            padding: 0;
            color: #333333;
        }
        .img_select {
            position: absolute;
            top: -9px;
            right: -9px;
            z-index: 999;
            background: #ffffff;
            width: 20px;
            height: 20px;
            border-radius: 50%;
        }
        .img_select div{
            color: #5574D7;
            font-size: 20px;
            font-weight: bold;
        }
        .icon_select {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid #5574D7;
        }
	</style>
</html>
